// 	一个管理后台，经常会有表单填写，不能我们切换标签了，再回来啥都重置了，
// 	那体验可不好，
// 	实现了keepAlive，放置切换重置。
// 	然后替换Outlet标签，去掉<Outlet/>
// 	<KeepAlive
// 			include={["/center/sys/user", "/center/sys/Xxxx"]}
// 			keys={[]} 
// 	></KeepAlive>

import { useRef, useEffect, useReducer, useMemo, memo } from 'react'
import { useLocation, useOutlet } from 'react-router-dom'

const KeepAlive = (props: any) => {
	const outlet = useOutlet()
	const { include, keys } = props
	const { pathname } = useLocation()
	const componentList = useRef(new Map())
	const forceUpdate = useReducer((bool: any) => !bool, true)[1] // 强制渲染
	const cacheKey = useMemo(
		() => pathname + '__' + keys[pathname],
		[pathname, keys]
	) // eslint-disable-line
	const activeKey = useRef<string>('')

	useEffect(() => {
		componentList.current.forEach(function (value, key) {
			const _key = key.split('__')[0]
			if (!include.includes(_key) || _key === pathname) {
				this.delete(key)
			}
		}, componentList.current)

		activeKey.current = cacheKey
		if (!componentList.current.has(activeKey.current)) {
			componentList.current.set(activeKey.current, outlet)
		}
		forceUpdate()
	}, [cacheKey, include]) // eslint-disable-line

	return (
		<div>
			{Array.from(componentList.current).map(([key, component]) => (
				<div key={key}>
					{key === activeKey.current ? (
						<div>{component}</div>
					) : (
						<div style={{ display: 'none' }}>{component}</div>
					)}
				</div>
			))}
		</div>
	)
}

export default memo(KeepAlive)
